<template>
  <div class="nnn-contain">
    <el-card class="margin10" v-for="(obj,index) in rightList" :key="index">
      <el-tag color="#fcc068" class="scolor">{{obj.shopright}}</el-tag>
      <el-form :inline="true" style="margin-left:200px">
        <el-form-item label="可上架的商品数量:" style="margin-right:30px">
          <el-input size="mini" v-model="obj.goods" style="width:60px"></el-input>个
        </el-form-item>
        <el-form-item label="价格:" style="margin-right:50px">
          <el-input size="mini" style="width:80px" v-model="obj.price"></el-input>元/年
        </el-form-item>
        <el-form-item label="优惠价:" class="redItem">
          <el-input size="mini" v-model="obj.discount" style="width:70px"></el-input>元/年
        </el-form-item>
      </el-form>
      <el-row>
        <el-col :offset="6">
          <el-button
            type="primary"
            class="btn"
            @click="btnSave(obj.id,index)"
            v-loading="loading ===obj.id ? true :false"
          >保存</el-button>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getAllRights, editRights } from '@/api/trade'
export default {
  name: 'Nnn',
  components: {},
  props: {},
  data() {
    return {
      rightList: [],
      rights: {
        id: '',
        shopright: '',
        goods: '',
        price: '',
        discount: ''
      },
      loading: null
    }
  },
  computed: {},
  created() {
    this.getAllRights()
  },

  methods: {
    async getAllRights() {
      const res = await getAllRights()
      console.log(res)
      this.rightList = res
    },
    async btnSave(id, index) {
      this.loading = id
      this.rights = this.rightList[index]
      await editRights(this.rights)
      this.$message.success('保存成功')
      this.loading = null
    }
  }
}
</script>

<style >
.scolor {
  margin-left: 100px;
  border-radius: 10px;
  font-size: 16px;
  color: #fff;
}
.redItem .el-form-item__label {
  color: red;
}
.margin10 {
  margin: 10px 0;
}
.btn {
  width: 180px;
}
</style>
